<template>
  <view class="ve-bottom-box" :style="[customStyle]">
    <view class="ve-bottom-box-wrap">
      <view class="ve-bottom-box-wrap-extra" v-if="$slots.extra">
        <slot name="extra"></slot>
      </view>
      <view class="ve-bottom-box-wrap-content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 've-bottom-box',
    props: {
      customStyle: Object,
    },
  }
</script>

<style lang="scss" scoped>
  .ve-bottom-box {
    position: relative;
    width: 100%;

    /* iPhoneX底部安全区定义--start */
    &-wrap {
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      z-index: 90;

      &-extra {
        padding: 0 24rpx;
      }
      &-content {
        width: 100%;
        padding: 24rpx 24rpx;
        display: flex;

        ::v-deep ve-button {
          flex: 1;

          & + ve-button {
            margin-left: 16rpx;
          }
        }
        ::v-deep .ve-button {
          flex: 1;

          & + .ve-button {
            margin-left: 16rpx;
          }
        }
      }
    }
  }
</style>
